<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <view class="content-box">
            <view>

                <view class="u-flex u-flex-col u-w-100s">
                    <u-form :model="taskData" :rules="rules" class="u-p-l-20 u-p-r-20" style="width: 96%;" ref="uForm" :errorType="errorType">

                        <view class="address-box u-w-100s">
                            <!-- 地址表单 -->
                            <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="任务名称:" prop="name">
                                <u-input placeholder="请填写任务名称" v-model="taskData.name" type="text" class="text_algin_right"></u-input>
                            </u-form-item>
                            <u-form-item :labelStyle="labelStyle" 　 label-width="150" label-position="left" label="体测项目:" prop="projectname">
                                <u-input type="select" v-model="taskData.projectname" :select-open="showXiangmu" placeholder="请选择任务项目" @click="showXiangmu = true;project_copy=JSON.parse(JSON.stringify(taskData.project));rojectname_copy=JSON.parse(JSON.stringify(taskData.projectname))" class="text_algin_right"></u-input>
                                <u-icon name="arrow-right" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
                            </u-form-item>
                            <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="任务模式:" prop="modelname">
                                <u-input type="select" v-model="taskData.modelname" :select-open="showMoshi" placeholder="请选择任务模式" @click="showMoshi = true;model_copy=JSON.parse(JSON.stringify(taskData.model));modelname_copy=JSON.parse(JSON.stringify(taskData.modelname))" class="text_algin_right"></u-input>
                                <u-icon name="arrow-right" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
                            </u-form-item>
                            <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="参与班级:" prop="classname">
                                <u-input type="select" v-model="taskData.classname" :select-open="shownianji" placeholder="请选择参与班级" @click="openClass()" class="text_algin_right"></u-input>
                                <u-icon name="arrow-right" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
                            </u-form-item>
                            <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="考核标准:" prop="standardname">
                                <u-input type="select" v-model="taskData.standardname" :select-open="showbiaozhun" placeholder="请选择考核标准" @click="showbiaozhun = true;standard_copy=JSON.parse(JSON.stringify(taskData.standard));standardname_copy=JSON.parse(JSON.stringify(taskData.standardname))" class="text_algin_right"></u-input>
                                <u-icon name="arrow-right" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
                            </u-form-item>
                            <u-form-item :labelStyle="labelStyle" label-width="150" label-position="left" label="任务周期:" prop="task_start">
                                <u-input type="select" v-model="taskData.task_time" :select-open="showzhouqi" placeholder="请选择任务周期" @click="showzhouqi = true" class="text_algin_right"></u-input>
                                <u-icon name="arrow-right" :color="'#ccc'" style="margin-top: -2px;"></u-icon>
                            </u-form-item>
                        </view>
                    </u-form>
                </view>
                <view class="u-flex u-flex-col u-w-100s u-m-t-100">
                    <view class="u-flex u-row-around u-col-center u-w-100s submit_content">
                        <button class="u-reset-button back-btn" @tap="goback()">返回</button>
                        <button class="u-reset-button notice-btn" @tap="submitForm()">提交</button>
                    </view>
                </view>

            </view>

            <u-calendar v-model="showzhouqi" :mode="mode" :active-bg-color="'#3FA897'" max-date="2050-01-01" @change="changeDate" :range-bg-color="'#caeee6'" :range-color="'#3FA897'" :customStyle="{background:'#3FA897'}"></u-calendar>

            <u-popup v-model="showMoshi" mode="bottom" :mask-close-able="false" :border="20" :closeable="false" close-icon-pos="top-right">
                <view class="modal-box page_box">
                    <view class="modal-head u-flex u-row-between u-w-100s u-p-20">
                        <button class="u-reset-button back-btn" @tap="showMoshi=false;taskData.model=model_copy;taskData.modelname=modelname_copy">取消</button>
                        <text class="head-title" style="font-size: 32rpx">选择模式</text>
                        <button class="u-reset-button notice-btn" style="color: #3FA897" @tap="showMoshi=false">提交</button>
                    </view>
                    <view class="modal-content u-flex u-flex-col u-col-top u-m-t-30 u-m-b-100 u-w-100s ">
                        <scroll-view scroll-y="true" class="modal-content">
                            <view @click="taskData.model = item.id;taskData.modelname = item.name" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-row-between"
                                  style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in modelist" :key="item.id">

                                <view class="u-flex">
                                    <view>{{ item.name }}</view>
                                </view>
                                <image :src="API_URL()+'images/select.png'" mode="" v-if="taskData.model == item.id"
                                       style="width: 32rpx;height: 32rpx;"></image>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="modal-foot u-flex u-row-center u-col-center">
                        <view class="u-flex u-row-around u-w-100s">


                        </view>
                    </view>
                </view>
            </u-popup>
            <u-popup v-model="shownianji" mode="bottom" :mask-close-able="false" :border="20" :closeable="false" close-icon-pos="top-right">
                <view class="modal-box page_box">
                    <view class="modal-head u-flex u-row-between u-w-100s u-p-20">
                        <button class="u-reset-button back-btn" @tap="closeClass()">取消</button>
                        <text class="head-title" style="font-size: 32rpx">选择班级</text>
                        <button class="u-reset-button notice-btn" style="color: #3FA897" @tap="shownianji=false">提交</button>
                    </view>
                    <view class="modal-content u-flex u-flex-col u-col-top u-m-t-30 u-m-b-100 u-w-100s ">
                        <scroll-view scroll-y="true" class="modal-content">
                            <view @click="chooseClass(item,index)" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-row-between"
                                  style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in classlist" :key="item.id">

                                <view class="u-flex">
                                    <view>{{ item.name }}</view>
                                </view>
                                <image :src="API_URL()+'images/select.png'" mode="" v-if="item.checked == item.id"
                                       style="width: 32rpx;height: 32rpx;"></image>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="modal-foot u-flex u-row-center u-col-center">
                        <view class="u-flex u-row-around u-w-100s">


                        </view>
                    </view>
                </view>
            </u-popup>

            <u-popup v-model="showXiangmu" mode="bottom" :mask-close-able="false" :border="20" :closeable="false" close-icon-pos="top-right">
                <view class="modal-box page_box">
                    <view class="modal-head u-flex u-row-between u-w-100s u-p-20">
                        <button class="u-reset-button back-btn" @tap="showXiangmu=false;taskData.project=roject_copy;taskData.projectname=rojectname_copy">取消</button>
                        <text class="head-title" style="font-size: 32rpx">体测项目</text>
                        <button class="u-reset-button notice-btn" style="color: #3FA897" @tap="showXiangmu=false">提交</button>
                    </view>
                    <view class="modal-content u-flex u-flex-col u-col-top u-m-t-30 u-m-b-100 u-w-100s ">
                        <scroll-view scroll-y="true" class="modal-content">
                            <view @click="taskData.project = item.id;taskData.projectname = item.name" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-row-between"
                                  style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in xiangmulist" :key="item.id">

                                <view class="u-flex">
                                    <view>{{ item.name }}</view>
                                </view>
                                <image :src="API_URL()+'images/select.png'" mode="" v-if="taskData.project == item.id"
                                       style="width: 32rpx;height: 32rpx;"></image>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="modal-foot u-flex u-row-center u-col-center">
                        <view class="u-flex u-row-around u-w-100s">


                        </view>
                    </view>
                </view>
            </u-popup>
            <u-popup v-model="showbiaozhun" mode="bottom" :mask-close-able="false" :border="20" :closeable="false" close-icon-pos="top-right">
                <view class="modal-box page_box">
                    <view class="modal-head u-flex u-row-between u-w-100s u-p-20">
                        <button class="u-reset-button back-btn" @tap="showbiaozhun=false;taskData.standard=standard_copy;taskData.standardname=standardname_copy">取消</button>
                        <text class="head-title" style="font-size: 32rpx">考核标准</text>
                        <button class="u-reset-button notice-btn" style="color: #3FA897" @tap="showbiaozhun=false">提交</button>
                    </view>
                    <view class="modal-content u-flex u-flex-col u-col-top u-m-t-30 u-m-b-100 u-w-100s ">
<!--                        <u-search class="shousuo" style="width: 70%;border-radius:20rpx;text-align: center!important;margin-left:10%" v-model="searchVal" :clearabled="true" :bg-color="'#eae9e9'" :search-icon-color="'#333'" :color="'#333'" :placeholder-color="'#ccc'" :show-action='false' margin="20rpx 0rpx 0rpx 20rpx" placeholder="请输入任务名称" height="64"></u-search>-->
                        <scroll-view scroll-y="true" class="modal-content">
                            <view @click="taskData.standard = item.id;taskData.standardname = item.name" class="u-flex u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-30 u-w-100s u-flex-1 u-row-between"
                                  style="border-bottom: 2rpx solid #EBEBEB;" v-for="(item, index) in kaohelist" :key="item.id">

                                <view class="u-flex">
                                    <view>{{ item.name }}</view>
                                </view>
                                <image :src="API_URL()+'images/select.png'" mode="" v-if="taskData.standard == item.id"
                                       style="width: 32rpx;height: 32rpx;"></image>
                            </view>
                        </scroll-view>
                    </view>
                    <view class="modal-foot u-flex u-row-center u-col-center">
                        <view class="u-flex u-row-around u-w-100s">


                        </view>
                    </view>
                </view>
            </u-popup>
        </view>
        <!-- <shopro-tabbar></shopro-tabbar> -->
    </view>
</template>

<script>

let systemInfo = uni.getSystemInfoSync();
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import { API_URL } from '@/env'
export default {
    components: {

    },
    data() {
        return {
            xiangmulist: [],
            kaohelist:[],
            showMoshi:false,
            showzhouqi:false,
            showXiangmu:false,
            shownianji:false,
            showbiaozhun:false,
            taskData:{
                name:'',
                projectname:'',
                project:'',
                model:'',
                modelname:'',
                class:[],
                classname:[],
                standard:'',
                standardname:'',
                task_time:'',
                task_start:'',
                task_end:''
            },
            roject_copy:'',
            rojectname_copy:'',
            standard_copy:'',
            standardname_copy:'',
            class_copy:'',
            classname_copy:'',
            model_copy:'',
            modelname_copy:'',
            labelStyle: {
                'font-size': '28rpx',
                'font-weight': '600',
                color: '#595959'
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入任务名称',
                        trigger: ['change', 'blur']
                    },
                ],
                projectname: [
                    {
                        required: true,
                        message: '请选择体测项目',
                        trigger: ['change', 'blur']
                    }
                ],
                modelname: [
                    {
                        required: true,
                        message: '请选择任务模式',
                        trigger: ['change', 'blur']
                    }
                ],
                classname: [
                    {
                        required: true,
                        message: '请选择参与班级',
                        trigger: ['change', 'blur']
                    }
                ],
                standardname: [
                    {
                        required: true,
                        message: '请选择考核标准',
                        trigger: ['change', 'blur']
                    }
                ],
                task_start: [
                    {
                        required: true,
                        message: '请选择考核周期',
                        trigger: ['change', 'blur']
                    }
                ],
            },
            errorType: ['message'],
            modelist: [
                {
                    id: '0',
                    name: '测试模式'
                },
                {
                    id: '1',
                    name: '训练模式'
                }
            ],
            classlist:[],
            xiangmuDetail:[],
            searchVal:'',
            classAllChoose:[],
            classAllChooseName:[]
        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),
    },
    async onLoad() {
        this.getmyxiangmu();
        this.getmyclass();
        this.getKHBiaozhun();
    },
    created(){
    },

    oonPageScroll(e) {

    },
    onShow() {
        let that = this;

        // this.showtabbar()
    },
    onHide() {

    },
    mounted() {

    },

    watch: {

    },
    methods: {
        API_URL() {
            return API_URL
        },
        openClass(){
            var that = this;
            that.shownianji = true;
            console.log("====",this.taskData.class)
            that.class_copy=JSON.parse(JSON.stringify(that.taskData.class));
            that.classname_copy=JSON.parse(JSON.stringify(that.taskData.classname))
            that.taskData.class.forEach((item)=>{
                that.classlist.map((item1)=>{
                    if(item == item1.id){
                        item1.checked = item
                    }
                })
            })
        },
        closeClass(){
            let that = this;
            that.shownianji=false;

            that.taskData.classname=that.classname_copy;
            that.classAllChooseName = that.classname_copy!=''?that.classname_copy.split(','):[];
            that.taskData.class.forEach((item)=>{
                that.classlist.map((item1)=>{
                    if(item == item1.id){
                        item1.checked = ""
                    }
                })
            })
            that.classAllChoose = that.class_copy;
            that.taskData.class= that.classAllChoose;
            console.log(this.classAllChoose,"===classlist",that.taskData.class)
        },
        chooseClass(item,index){
            let start_index = this.classAllChoose.indexOf(String(item.id));
	        console.log("===classAllChooseName",start_index)
            if(start_index !== -1){
                item.checked = ''
            this.classAllChoose.splice(start_index, 1);
                this.taskData.class = this.classAllChoose;
                this.classAllChooseName.splice(start_index, 1);
                this.taskData.classname = this.classAllChooseName.join(',')
                this.classlist.splice(index, 1, item)
            }else{
                item.checked = item.id
                this.classAllChoose.push(String(item.id));
                this.taskData.class = this.classAllChoose;
                this.classAllChooseName.push(item.name);
                this.taskData.classname = this.classAllChooseName.join(',')
                this.classlist.splice(index, 1, item)
            }
	        console.log(this.classAllChoose,"===this.classAllChooseName",this.taskData.class)
	        console.log(this.classAllChooseName,"===this.classAllChooseName",this.taskData.classname)
        },
        goback(){
            uni.navigateBack()
        },
        submitForm(){
            let that = this;
            that.$http('login.addtask', {
                name:that.taskData.name,
                project:that.taskData.project,
                model:that.taskData.model,
                class:JSON.stringify(that.taskData.class),
                standard:that.taskData.standard,
                task_start:that.taskData.task_start,
                task_end:that.taskData.task_end,
                status:1
            }).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon: 'none',
                    duration: 1000,
                    mask: true
                });
                if(res.msg == "添加成功"){
                    uni.navigateBack()
                }
            });
        },
        changeDate(e) {
            console.log("====e", e)
            this.taskData.task_start = e.startDate
            this.taskData.task_end = e.endDate
            this.taskData.task_time =  e.startDate + '至' +e.endDate;
        },
        getmyclass(){
            let that = this;
            that.$http('login.getmyclass', {
                yid: that.userInfo.departmentsId
            }).then(res => {

                that.classlist = res.data;

            });
        },
        getmyxiangmu(){
            let that = this;
            that.$http('login.getmyxiangmu', {
                oid: that.userInfo.schoolId
            }).then(res => {

                    that.xiangmulist = res.data;

            });
        },
        getKHBiaozhun(){
            let that = this;
            that.$http('login.getKHBiaozhun', {
                oid: that.userInfo.schoolId
            }).then(res => {
                that.kaohelist = res.data;
            });
        },

        // 路由跳转
        jump(path, parmas) {
            console.log('-----11111');
            this.$Router.push({
                path: path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss">
.home-wrap{
}
.bianji{
    width: 90%;
    background: #0081ff;
    border-radius: 30rpx;
    color:#fff;
}
.input-item{
    color:#333;
    margin:20rpx 0rpx 20rpx 20rpx;
    height: 64rpx;
    background: #FFFFFF;
    border-radius: 30rpx;
    text-indent: 14rpx;
}
//nav
.zixun-item {
    border-radius: 20rpx;
    background: #fff;

    .zixuntitle {
        color: #333;
        font-size: 28rpx;
    }

    .zixunimg {
        width: 100%;
        height: 180rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .zixuntime {
        color: #cccccc;
        font-size: 24rpx;
    }

    .yichu {
        padding: 16rpx 26rpx;
        border-radius: 34rpx;
        background: #0081ff;
        color: #fff;
    }

    .tag {
        color: #fff;
        padding: 6rpx 18rpx;
        font-size: 20rpx;
        border-radius: 20rpx;
        border: 2rpx solid transparent;
        margin-right: 10rpx;
    }
}
.userInfo{
    .userleft{
        background: #F5F5F5;
        padding:20rpx 20rpx;
        .usertitle{
            font-size:30rpx;
        }
    }
    .userright{
        padding:10rpx 24rpx;
        background: #0081ff;
        border-radius: 30rpx;
        color: #FFFFFF;
    }

}
// 提示
.notice-modal {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 85vw;
    min-height: 358rpx;
    background: #ffffff;
    padding: 30rpx;
    border-radius: 20rpx;

    .notice-title {
        width: 100%;
        font-size: 30rpx;
        font-weight: bold;
        color: #46351b;
        text-align: center;
    }

    .notice-detail {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
        margin-bottom: 50rpx;
    }

    .back-btn {
        width: 45%;
        height: 70rpx;
        line-height: 70rpx;
        background: #f8f8f8;
        box-shadow: 0 7rpx 8rpx 2rpx #ccc;
        border-radius: 35rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
    }

    .notice-btn {
        width: 45%;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #fff;
        border-radius: 35rpx;
        background: linear-gradient(90deg, #3357DB 0%, #3469E1 47%, #3597F1 100%);
        box-shadow: 0 7rpx 8rpx 2rpx #3597F1;
    }
}
.task-item{
    padding: 20rpx 0;
    border-bottom:2rpx solid #f5f5f5;
    .icon-phone{
        width: 80rpx;
        height: 80rpx;
    }
    .kehulsit{
        &:first-child{
            color:#8E8E8E;
        }
    }
}
.submit_content{
    .back-btn {
        width: 35%;
        height: 70rpx;
        line-height: 70rpx;
        background: #f8f8f8;
        box-shadow: 0 7rpx 8rpx 2rpx #ccc;
        border-radius: 35rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 10rpx;
    }

    .notice-btn {
        width: 35%;
        height: 70rpx;
        line-height: 70rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #fff;
        border-radius: 35rpx;
        background: linear-gradient(90deg, #3FA897 0%, #3FA897 47%, #3FA897 100%);
    }
}
::v-deep .u-input{
    text-align:right!important;
}
::v-deep .u-form-item--right__content__slot{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shousuo ::v-deep .u-input{
    text-align:center!important;
}
.modal-content{
    max-height: 40vh;
}
</style>
